<template>
  <div class="container">
    <el-row>
      <el-col :span="2">
        <el-button type="primary">选择数据</el-button>
      </el-col>
      <el-col :span="1"> </el-col>
      <el-col :span="14">
        <el-slider
          v-model="value"
          range
          :min="0"
          :max="200"
          :step="1"
          show-tooltip
          :format-tooltip="formatTooltip"
          :marks="marks"
        />
      </el-col>
      <el-col :span="1"> </el-col>
      <el-col :span="6">
        <el-popover placement="left" :width="500" trigger="click" title="设置起始时间">
          <template #reference>
            <el-button>设置</el-button>
          </template>
          <p>
            <el-icon><InfoFilled /></el-icon> 小于1分钟，数据颗粒度：点位/20ms;<br><el-icon><InfoFilled /></el-icon> 1分钟~50分钟，数据颗粒度：点位/1s；<br><el-icon><InfoFilled /></el-icon> 大于50分钟，数据颗粒度：点位/1min；
          </p>

          <el-row>
            <el-col :span="20">
              <el-date-picker
                v-model="datepicker"
                type="datetimerange"
                range-separator="To"
                start-placeholder="Start date"
                end-placeholder="End date"
              />
            </el-col>
            <el-col :span="4">
              <el-button @click="show">确定</el-button>
            </el-col>
          </el-row>
        </el-popover>
      </el-col>
    </el-row>

    <br />
    <br />

    <div ref="echart1" style="width: 100%; height: 300px"></div>
    <div ref="echart2" style="width: 100%; height: 300px"></div>
    <div ref="echart3" style="width: 100%; height: 300px"></div>
  </div>
</template>

<script lang="ts">
import { reactive, toRefs, ref, onMounted, defineComponent } from "vue";
// import * as echarts from "echarts";

export default defineComponent({
  setup() {
    const state = reactive({
      count: 0,
      value: ref([1, 200]),
      datepicker: ref([
        new Date(2000, 10, 10, 10, 10),
        new Date(2000, 10, 11, 10, 10),
      ]),
      startTime: "2022-05-15 15:11:01",
      marks: {
        0: "2022-05-15 15:11:01",
        60: "2022-05-15 16:11:01",
        120: "2022-05-15 17:11:01",
        180: "2022-05-15 18:11:01",
        240: "2022-05-15 19:11:01",
      },
      echart1: ref(null),
      echart2: ref(null),
      echart3: ref(null),
    });

    const methods = {
      formatTooltip(value: any) {
        let start = new Date(state.startTime);
        start.setMinutes(start.getMinutes() + value);
        return 123;
      },
      show() {
        state.value = [150, 170];
      },
    };

    onMounted(() => {
      console.log(123);
      // console.log(state.echart);

      let myChart1 = this.$echarts.init(state.echart1);
      let myChart2 = this.$echarts.init(state.echart2);
      let myChart3 = this.$echarts.init(state.echart3);

      myChart1.group = "group1";
      myChart2.group = "group1";
      myChart3.group = "group1";

      this.$echarts.connect([myChart1, myChart2, myChart3]);

      // 绘制图表
      let base = +new Date(1968, 9, 3);
      let oneDay = 24 * 3600 * 1000;
      let date = [];
      let data = [Math.random() * 300];
      for (let i = 1; i < 20000; i++) {
        var now = new Date((base += oneDay));
        date.push(
          [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/")
        );
        data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
      }
      let data2 = data.slice();
      data2.reverse();
      let data3 = data2.map((item) => Math.floor(item / 2));
      let option = {
        tooltip: {
          trigger: "axis",
          // backgroundColor: "rgba(255,255,255,0.7)",
          // borderColor: "#000",
          // extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.9);",
          // confine: true,
          showContent: true,
          // showDelay: 100,
          // hideDelay: 100,
          // enterable: true,
          // formatter: "{b0}: {c0}<br />{b1}: {c1}",
          // valueFormatter: (value) => "$" + value.toFixed(2),
          alwaysShowContent: true,
          position: function (pt) {
            return [pt[0], "10%"];
          },
          // order: "",
        },
        title: {
          left: "left",
          text: "横向控制误差",
        },
        legend: {
          type: "plain",
          left: "right",
          // width: 200,
          // itemStyle: {
          //   color: "#f00",
          // },
          // lineStyle: {
          //   color: "#ff0",
          // },
          // itemWidth:200
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: date,
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, "100%"],
        },
        dataZoom: [
          {
            type: "inside",
            startValue: 0,
            endValue: 20000,
            // minValueSpan: 3000,
            throttle: 300,
          },
          {
            start: 0,
            end: 10,
          },
        ],
        // visualMap: {//控制折线分段颜色
        //   show: false,
        //   dimension: 0,
        //   pieces: [
        //     {
        //       lte: 0,
        //       color: "green",
        //     },
        //     {
        //       gt: 0,
        //       lte: 100,
        //       color: "red",
        //     },
        //     {
        //       gt: 100,
        //       color: "blue",
        //     },
        //   ],
        // },
        series: [
          {
            name: "误差",
            type: "line",
            symbol: "none",
            sampling: "lttb",
            itemStyle: {
              color: "rgb(255, 70, 131)",
            },
            markArea: {
              itemStyle: {
                color: "rgba(255, 173, 177, 0.4)",
              },
              data: [
                [
                  {
                    name: "自动驾驶",
                    xAxis: "1970/1/17",
                  },
                  {
                    xAxis: "1972/7/17",
                  },
                ],
                [
                  {
                    name: "自动驾驶",
                    xAxis: "1976/2/17",
                  },
                  {
                    xAxis: "1979/9/17",
                  },
                ],
              ],
            },
            data: data,
          },
          {
            name: "真实值",
            type: "line",
            symbol: "none",
            sampling: "lttb",
            itemStyle: {
              color: "rgb(255, 70, 131)",
            },
            data: data2,
          },
          {
            name: "目标值",
            type: "line",
            symbol: "none",
            sampling: "lttb",
            itemStyle: {
              color: "rgb(255, 70, 131)",
            },
            data: data3,
          },
        ],
      };
      render();
      function render() {
        myChart1.setOption(option);
        myChart2.setOption(option);
        myChart3.setOption(option);
      }
      // setTimeout(() => {
      //   option.series = option.series.map((item) => {
      //     item.data.push(...item.data);
      //     return item;
      //   });
      //   option.xAxis.data.push(...option.xAxis.data);
      //   // debugger;
      //   render();
      // }, 5000);
    });

    return {
      ...toRefs(state),
      ...methods,
    };
  },
});

// Date.prototype.format = function (fmt) {
//   var o = {
//     "M+": this.getMonth() + 1, //月份
//     "d+": this.getDate(), //日
//     "h+": this.getHours(), //小时
//     "m+": this.getMinutes(), //分
//     "s+": this.getSeconds(), //秒
//     "q+": Math.floor((this.getMonth() + 3) / 3), //季度
//     S: this.getMilliseconds(), //毫秒
//   };
//   if (/(y+)/.test(fmt)) {
//     fmt = fmt.replace(
//       RegExp.$1,
//       (this.getFullYear() + "").substr(4 - RegExp.$1.length)
//     );
//   }
//   for (var k in o) {
//     if (new RegExp("(" + k + ")").test(fmt)) {
//       fmt = fmt.replace(
//         RegExp.$1,
//         RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
//       );
//     }
//   }
//   return fmt;
// };
</script>

<style lang="scss" scoped>
.container {
  width: 1500px;
  margin: 0 auto;
}
</style>